<template>
    <div>
      <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        width="52%"
        top="8vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">每周之星</span>
        </div>
        <div class="weeklystar_content">
            <div class="weeklystar_content_top">
                <el-button type="primary" icon="el-icon-plus" @click="opennewWeeklyStar()">每周之星</el-button>
                <el-button type="info" plain icon="el-icon-time" @click="opendelayed()" :disabled="listId && listId.length > 0 ? isdisabled = false : isdisabled = true">延时</el-button>
            </div>
            <div style="margin-top:25px;color:#999;font-size:17px;">每周之星最多同时存在20个人</div>
            <div class="weeklystar_content_table">
                <template>
                    <el-table :data="tableData" border style="width: 100%;" ref="multipleTable" height="381"
                    :header-cell-style="{backgroundColor: '#FAFAFA',color: '#000'}"
                    tooltip-effect="dark" v-loading="loading" element-loading-text="数据加载中..."
                    @selection-change="selectDeleta" @select-all="selectAllList">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="nickname" label="昵称"></el-table-column>
                        <el-table-column label="头像">
                            <template slot-scope="scope">
                                <el-avatar size="medium" :src="scope.row.userImg"></el-avatar>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机" show-overflow-tooltip width="105">
                        <template slot-scope="scope">
                            {{ scope.row.mobilePhone ? scope.row.mobilePhone.replace(/(\d{3})(\d{4})(\d{4})/g, '$1****$3') : '' }}
                        </template>
                        </el-table-column>
                        <el-table-column prop="name" label="真实实名"></el-table-column>
                        <el-table-column prop="sex" label="性别"></el-table-column>
                        <el-table-column prop="age" label="年龄"></el-table-column>
                        <el-table-column prop="residence" label="居住地"></el-table-column>
                        <el-table-column label="剩余">
                            <template slot-scope="scope">
                                {{ scope.row.daysRemaining }}天
                            </template>  
                        </el-table-column>
                        <el-table-column fixed="right" label="操作">
                           <template slot-scope="scope">
                                <el-button type="text" size="medium" @click.native.prevent="deleteUser(scope.$index,scope.row)">
                                    <span>删除</span>
                                </el-button>
                           </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer" style="margin-top: 30px;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
        <newWeeklyStar v-if="isnewWeeklyStar" v-on:closenewWeeklyStar="closenewWeeklyStar" v-on:selectedUsers="selectedUsers"></newWeeklyStar>
        <delayed v-if="isdelayed" :propsObj="listId" v-on:closedelayed="closedelayed" v-on:resetFormDelayed="resetFormDelayed"></delayed>
      </el-dialog>
    </div>
</template>

<script>
import newWeeklyStar  from "./newWeeklyStar.vue";  // 新增每周之星
import delayed  from "./delayed.vue";  // 延时

export default {
  name: "weeklystar",
  components: {
    newWeeklyStar,
    delayed
  },
  props: {
    propsObj: {   // 用户详情数据
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      centerDialogVisible: true,  
      loading: false,
      tableData: [],
      userObj: [],
      isnewWeeklyStar: false,
      isdelayed: false,
      isdisabled: false,
      listId: []
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val
      },
      deep:true,
      immediate:true
    }
  },
  created(){
    this.getData()
  },
  methods: {
    // 列表数据
    getData(){
      this.loading = true;
      const number = Math.round(Math.random()*1500); 
      setTimeout(()=>{
        const list = [
          {
            id: 101,
            nickname: '落叶',
            userImg: '',
            mobilePhone: '15219571006',
            name: '虹雪飘',
            sex: '女',
            age: '21',
            residence: '广东深圳',
            daysRemaining: '1',
          },
          {
            id: 102,
            nickname: '夏天',
            userImg: '',
            mobilePhone: '15219571006',
            name: '夏白白',
            sex: '女',
            age: '22',
            residence: '广东广州',
            daysRemaining: '3',
          },
          {
            id: 103,
            nickname: '秋风',
            userImg: '',
            mobilePhone: '15219571006',
            name: '小王',
            sex: '男',
            age: '19',
            residence: '广东佛山',
            daysRemaining: '5',
          },
          {
            id: 104,
            nickname: '晚霞',
            userImg: '',
            mobilePhone: '15219571006',
            name: '张灰灰',
            sex: '女',
            age: '23',
            residence: '福州厦门',
            daysRemaining: '2',
          },
          {
            id: 105,
            nickname: '冰雪',
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨嘿嘿',
            sex: '男',
            age: '19',
            residence: '广东深圳',
            daysRemaining: '3',
          }        
        ]
        // this.tableData = list;
        this.tableData = this.userObj;
        this.loading = false;
      },number)
    },
    // 关闭弹框；
    closeisweeklystar(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeisweeklystar');
    },
    // 确定
    submitForm() {
      this.$message.success('设置成功！');
      this.close()
    },
    // 删除
    deleteUser(index,row){
      this.$confirm('确定将选择的数据进行删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        // if (this.tableData && this.tableData.length > 0) {    // 方法一 删除当前行数据
        //   for (let i = 0; i < this.tableData.length; i++) {
        //     if (this.tableData[i].id === row.id) {
        //       this.tableData.splice(i, 1)
        //       break;
        //     }         
        //   }
        // }
        this.$emit('clearSelectionUser',row);
        this.tableData.splice(index, 1);  // 方法二 删除当前行数据
        this.$message.success('删除成功！');
      }).catch(() => {
        // this.$message.info('取消删除！');          
      });
    },
    // 新增每周之星
    opennewWeeklyStar(){
      this.isnewWeeklyStar = true;
    },
    // 关闭新增每周之星
    closenewWeeklyStar(){
      this.isnewWeeklyStar = false;
    },
    // 选中的罗曼用户
    selectedUsers(userList){
      const list = userList;
      this.tableData = this.tableData.concat(list);
    },
    // 延时
    opendelayed(){
      this.isdelayed = true;
    },
    // 关闭延时对话框
    closedelayed(){
      this.isdelayed = false;
    },
    // 选中数据
    selectDeleta(selection){
      this.listId = selection
    },
    // 全选
    selectAllList(selection){
      this.listId = selection;
    },
    // 增加延时
    resetFormDelayed(list){
      this.$nextTick( ()=> {
        if (this.userObj && this.userObj.length > 0) {
          this.userObj.forEach(item => {
            list.forEach( item2 => {
              if (item.lmId === item2.lmId) {
                item.daysRemaining = item2.daysRemaining
              }
            })
          })
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.weeklystar_content{
    margin-left: 1%;
    .weeklystar_content_top{
       margin-top: -20px;
       width: 100%;
       display: flex;
       justify-content: start;
       align-items: center;
    }
    .weeklystar_content_table{
        margin-top:10px;
    }
}
</style>
